<template>
  <div class="container">
    <div class="title">
      <div class="contain">
        <div class="title_item">
          <img src="@/assets/home/title.png">
          <h2>数字安全@数字中国</h2>
          <div style="margin-bottom: 0;">
            <p>2024年5月5日-5月8日</p>
            <p>杭州市滨江区文化中心剧院一层</p>
          </div>
        </div>
        <div class="contain_picture">
          <img src="@/assets/home/logo.png" alt="">
        </div>
      </div>
    </div>
    <div class="intro">
      <h2>大会主旨</h2>
      <div>
        <video
            id="video"
            poster="https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/3/9a010a40075e4c048ed860bb4016e95f.jpg"
            muted
            loop
            src="https://img2023.gcsis.cn/2023/3/dd8d928e6e734c9592cb5833597564c6.mp4"
            autoplay
        ></video>
      </div>
    </div>
    <div class="hightlight">
      <h2>大会亮点</h2>
      <p>共同期待 2024 西湖论剑大会活动的亮点内容！</p>
      <div class="cards">
        <div v-for="item in high" class="card">
          <Card :title="item.title" :body="item.body" :img="item.img"/>
        </div>
      </div>
    </div>
    <div class="export">
      <h2>重磅嘉宾</h2>
      <ul class="expert-list">
        <li v-for="expert in exports" class="single-expert">
          <img :src="expert.imgUrl" class="expert-img">
          <h2 class="expert-name">{{ expert.name }}</h2><br>
          <p class="expert-position">{{ expert.position }}</p>
        </li>
      </ul>
    </div>
    <div style="width: 100% ;height: 30vw">
      <Help :title="'西湖帮'" :body="'想要找到好工作,想要学到新技术,想要参与竞赛,西湖帮助力快人一步'"
            :imgsrc="'https://ioconnectchina.googlecnapps.cn/2023/static/images/th_qiunHFwNhW5tbp6cXZDmj2MtbD5zCdYo1Sm4Uj91qGQ9RRz4uc5_F4jZfAzo2TA7XW9j4kJ2Ohk0b-npwYMHSjiA8dRDvYwqxWtHt5-jLcG9E870.jpeg'"
            :url="'study'"/>
    </div>
    <div style="width: 100% ;height: 30vw">
      <Detail :title="'关注我们'" :body="'大会信息实时提醒，技术咨询一手掌握'"
              :imgsrc="'https://ioconnectchina.googlecnapps.cn/2023/static/images/E3UaTxqpY3i4NxMe98rsSofO9DzaF4bP_vrXf71m0KhLIdiejgsdQNw8zzx9leH5pLvA_1acDKlL8ZZ_zo4wqArTshif3Mnq7TZ-7b_BKaY0SY1KVxo.png'"/>
    </div>
    <div class="pre">
      <carousel/>
    </div>
    <div class="workmate">
      <h2>合作伙伴</h2>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane name="first">
          <template #label>
            <h3>生态合作伙伴</h3>
          </template>
          <div class="container">
            <img v-for="index in 18" :key="index" class="photo" src="@/assets/home/logo.png" alt="">

            <!-- 以此类推，添加更多照片 -->
          </div>
        </el-tab-pane>
        <el-tab-pane name="second">
          <template #label>
            <h3>战略合作伙伴</h3>
          </template>
          <div class="container">
            <img v-for="index in 18" :key="index" class="photo" src="@/assets/home/logo.png" alt="">

            <!-- 以此类推，添加更多照片 -->
          </div>
        </el-tab-pane>
        <el-tab-pane name="third">
          <template #label>
            <h3>新闻媒体</h3>
          </template>
          <div class="container">
            <img v-for="index in 18" :key="index" class="photo" src="@/assets/home/logo.png" alt="">

            <!-- 以此类推，添加更多照片 -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script lang="ts" setup name="Home">
  import Help from './help/index.vue'
  import Detail from './detail/index.vue'
  import {onMounted, reactive} from 'vue'
  import Card from './card/index.vue'

  import Carousel from './carousel/index.vue'
  import {ref} from 'vue'
  import type {TabsPaneContext} from 'element-plus'
  import {useLoginStore, User} from "@/store/login_data.ts";
  import {getUserinfo} from "@/api/user.ts";

  const activeName = ref('first')

  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  const high = reactive([{
    title: '格致论道@西湖论剑',
    body: '“格致论道”是中国科学院计算机网络信息中心和中国科学院科学传播局联合主办的科学文化讲坛。致力于非凡思想的跨界交流，提倡以"格物致知"的精神探讨科技、教育、生活、未来的发展。',
    img: 'https://img2023.gcsis.cn/2023/4/62eaf1128543498d87fefbe31913a5a3.jpeg'
  },
    {
      title: '第二直播间',
      body: '邀请多位嘉宾,就一些时下热门话题展开讨论,相互交流',
      img: '/src/assets/home/second.jpeg'
    },
    {
      title: '西湖论剑的十二个维度',
      body: '“2024年，西湖论剑迈入第十二年，奋进十二年，持续精进，新篇将起，邀君从高度、力度、厚度、精度……十二个维度，共鉴大会。',
      img: 'https://obs-xhlj.obs.cn-east-3.myhuaweicloud.com/2023/4/fc272ac7bc0f42778115e5525fd54948.jpg'
    }])
  const exports = reactive([
    {
      id: '01',
      name: '范渊',
      imgUrl: 'https://img2023.gcsis.cn/2023/4/1a80708d46f64e079919a2c93a6aa7c4.png',
      position: '安恒董事长',
    },
    {
      id: '02',
      name: '刘世锦',
      imgUrl: 'https://img2023.gcsis.cn/2023/4/3976ced942c44672b457895baa4e33e8.png',
      position: '国务院发展研究中心原副主任、中国发展研究基金会副理事长',
    },
    {
      id: '03',
      name: '沈昌祥',
      imgUrl: 'https://img2023.gcsis.cn/2023/4/c113813fe5414f2e9aa7cee9a4d1030e.png',
      position: '中国工程院院士',
    },
    {
      id: '04',
      name: '邬贺铨',
      imgUrl: 'https://img2023.gcsis.cn/2023/4/e64b9555a46c4291a0a654a97ebce5ba.png',
      position: '中国工程院院士',
      date: 'day1'
    },
    {
      id: '05',
      name: '谭晓生',
      imgUrl: '	https://img2023.gcsis.cn/2023/4/aa1635e18de24d88b86753e1ca39a05e.png',
      position: '北京赛博英杰科技有限公司董事长',
      date: 'day2'
    },
  ]);
  const loginStore = useLoginStore();
  onMounted(async () => {

    let token: string = localStorage.getItem("Token");
    console.log(token)
    if (!token) {
      return;
    }
    let data: User = await getUserinfo();
    loginStore.userinfo = data;
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
  })
</script>

<style scoped lang="scss">
  .title {
    background-color: black;
    border-radius: 20px;
    height: 30vw;
    margin-top: 4vw;
    width: 100%;

    .contain {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-top: 2vw;
      .title_item {
        width: 100%;
        height: 25vw;
        display: flex;
        flex-direction: column;
        transform: translatex(15%);

        img {
          margin-top: 1vw;
          width: 25vw;
          height: 10vw;
          overflow: hidden;
        }

        h2 {
          width: fit-content;
          font-size: 3vw;
          color: white;
          line-height: 9.5vw;
        }

        p {
          width: fit-content;
          font-size: 1.2vw;
          color: white;
          line-height: 1.5;
        }
      }

      .contain_picture {
        width: 100%;
        height: 25vw;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }

  .intro {
    width: 100%;
    height: 60vw;
    margin-bottom: 4vw;

    h2 {
      margin-top: 6vw;
      text-align: left;
    }

    video {
      left: 0;
      top: 0;
      margin-top: 3vw;
      width: 100%;
      height: 100%;
      background-color: rgb(216, 253, 199);
      z-index: 2;
    }
  }

  .hightlight {
    width: 100%;
    height: 45vw;

    p {
      margin-top: 1vw;
      margin-bottom: 1vw;
    }

    .cards {
      display: flex;
      justify-content: space-between;
      height: 35vw;

      .card {
        display: flex;
        justify-content: center;
        border-radius: 1.0vw;
      }

      .card:hover {
        border: 2px solid black;
      }
    }
  }

  .export {
    margin-top: 2vw;
    width: 100%;
    height: 30vw;

    .expert-list {
      width: 100%;
      margin-top: 5vw;
      height: 20vw;
      display: flex;
      overflow: hidden;
      z-index: 1;
      flex-wrap: wrap;
      justify-content: flex-start;

      .single-expert {
        flex: 0 0 20%;
        height: 20vw;
        margin-bottom: 2.0833vw;
        overflow: hidden;
        text-align: center;

        .expert-img {
          width: 10vw;
          height: 10vw;
          border-radius: 15.625vw;
        }

        .expert-name {
          margin-top: 1.5vw;
          font-size: 1.4583vw;
          letter-spacing: 0.15vw;
        }

        .expert-position {
          font-size: 0.8vw;
          color: #80868B;
          letter-spacing: 0.02vw;
        }
      }
    }
  }

  .pre {
    height: 55vw;
    width: 100%;
  }

  .workmate {
    height: 45vw;
    width: 100%;

    h2 {
      margin-bottom: 1vw;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* n为照片数量 */
      grid-gap: 4px; /* 照片之间的间隙 */
      justify-items: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      .photo {
        width: 100%;
      }
    }
  }

</style>
